// 公用css文件
require("../../assets/css/communal.less");

// 引入字体文字
require("../../assets/fonts/fitness-fonts/iconfont.css");

// 引入axios
const axios = require("../../util/axios.js");

// 引入工具js
const dom = require("../../util/dom.js");

// 引入echarts
import * as echarts from "echarts";

// 当前页的css文件
require("./mine_sports_data.less");

// 当前页js
document.addEventListener("DOMContentLoaded", async function () {
	// 渲染数据
	let result = await axios.get("/api/exercise");
	console.log(result);

	// 结构处理数据

	let { sum7Duration, sum7Calorie, sum7Meter, days } = result.data.data;
	console.log(days);
	// 渲染总时长
	dom.$("#data1").textContent = sum7Duration;

	// 渲染卡路里
	dom.$("#data2").textContent = sum7Calorie;

	// 渲染消耗的卡路里
	dom.$("#calorie").textContent = sum7Calorie;

	// 渲染运动天数
	dom.$("#day1").textContent = days.length;
	dom.$("#day2").textContent = days.length;

	// 图表配置
	// 基于准备好的dom，初始化echarts实例
	var myChart1 = echarts.init(dom.$("#chart1"));

	// 处理数据
	let x = days.map((v) => v.date.slice(5)); // 日期
	let y = days.map((v) => v.sumDuration); // 运动时长
	// 指定图表的配置项和数据
	myChart1.setOption({
		title: {
			text: "近7天的运动时长",
			left: 15,
			top: 10,
		},
		grid: {
			left: 50,
			height: 150,
		},
		xAxis: {
			type: "category",
			data: x,
		},
		yAxis: {
			type: "value",
		},
		// 数据序列
		series: [
			{
				data: y,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(0, 0, 0, 0.1)",
				},
			},
		],
		color: "#8600FF",
	});

	// 图表二
	let rdata = 0;
	days.forEach((v) => {
		return (rdata += v.exerciseData[0].duration); // 跑步综合数据
	});

	let cdata = 0;
	days.forEach((v) => {
		return (cdata += v.exerciseData[1].duration); // 骑行综合数据
	});

	let cldata = 0;
	days.forEach((v) => {
		return (cldata += v.exerciseData[2].duration); // 课程训练综合数据
	});
	var myChart2 = echarts.init(dom.$("#chart2"));
	myChart2.setOption({
		title: {
			text: "运动分类",
			left: 20,
			top: 15,
		},
		tooltip: {
			trigger: "item",
		},
		legend: {
			orient: "vertical",
			left: 15,
			top: 40,
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: "90%",
				label: {
					position: "inside",
					fontSize: 15,
					formatter: "{d}%",
					color: "#3C3C3C",
					fontWeight: "bold",
				},
				left: 100,
				data: [
					{ value: rdata, name: "跑步" },
					{ value: cdata, name: "骑行" },
					{ value: cldata, name: "课程训练" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
		color: ["#FFFF37", "#9AFF02", "#46A3FF"],
	});

	// 图表三
	// 处理数据,每一项运动的数据
	let run = days.map((v) => v.exerciseData[0].calorie); // 跑步消耗的卡路里
	let cycling = days.map((v) => v.exerciseData[1].calorie); // 骑行消耗的卡路里
	let drill = days.map((v) => v.exerciseData[2].calorie); // 训练消耗的卡路里

	var myChart3 = echarts.init(dom.$("#chart3"));
	myChart3.setOption({
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
			data: y,
		},
		yAxis: {
			type: "category",
			data: x,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: run,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: cycling,
			},
			{
				name: "课程训练",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: drill,
			},
		],
	});

	// 图表四
	// 运动的公里数
	let meter = days.map((v) => v.sumMeter);
	var myChart4 = echarts.init(dom.$("#chart4"));
	myChart4.setOption({
		title: {
			text: "近七天运动的公里数",
			left: 20,
			top: 15,
		},
		grid: {
			left: 50,
			height: 150,
		},
		xAxis: {
			type: "category",
			data: x,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: meter,
				type: "line",
				label: {
					show: true,
					position: "inside",
					fontSize: 12,
					color: "#EE2C79",
					fontWeight: "bold",
				},
			},
		],
	});
});
